import "./Login.css"
import {useState} from 'react'
import { Button } from "antd";
import { UserOutlined, PhoneOutlined} from '@ant-design/icons';
import PassLogin from './PassLogin';
import TelLogin from './TelLogin';
const Login = (props) => {
  const [passlogin, setPasslogin] = useState(true)
  const PassLo=()=>{
    setPasslogin(true);
  }
  const TelLo=()=>{
    setPasslogin(false);
  }
  return (
    <div className="cont">
      <div className="box">
        <div className="tit">共享Homestay后台</div>
        <div className="tit">
          <Button type={passlogin?'primary':'default'} icon={<UserOutlined />} onClick={PassLo}>账号密码登录</Button>
          <Button type={!passlogin?'primary':'default'} icon={<PhoneOutlined />}  onClick={TelLo}>手机验证码登录</Button>
        </div>
        <div className="formbox">
           {passlogin?<PassLogin props={props} />:<TelLogin props={props}/>}
        </div>
      </div>
    </div>
  );
}

export default Login